<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机号码登录/注册</title>
    <link rel="stylesheet" href="../css/register.css">
</head>

<body>
    <div class="container">
        <h1>手机号码登录/注册</h1>
        <form id="loginForm">
            <div class="input-group">
                <label for="phone">+86</label>
                <input type="text" id="phone" placeholder="请输入手机号码" required>
            </div>
            <div class="input-group">
                <label for="verification-code">验证码</label>
                <input type="text" id="verification-code" placeholder="请输入验证码" required>
                <button type="button" class="get-code" id="getCodeButton">获取验证码</button>
            </div>
            <button type="submit" class="submit-button">登录</button>
            <div class="footer">
                <label>
                    <input type="checkbox" required>
                    我已阅读并同意用户协议、隐私政策，未注册手机号会自动注册
                </label>
                <p>登录遇到问题</p>
            </div>
        </form>

    </div>

    <script>
        // 发送验证码
        document.getElementById('getCodeButton').addEventListener('click', function () {
            const phoneNumber = document.getElementById('phone').value;
            if (/^\d{11}$/.test(phoneNumber)) { // 验证手机号码格式
                // 假设发送验证码成功
                alert('验证码已发送到 ' + phoneNumber);
                // 这里可以添加模拟验证码的逻辑
            } else {
                alert('请输入有效的手机号码');
            }
        });

        // 登录/注册
        document.getElementById('loginForm').addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止默认表单提交

            const phoneNumber = document.getElementById('phone').value;
            const verificationCode = document.getElementById('verification-code').value;

            // 检查验证码
            if (verificationCode === "123456") { // 假设验证码是123456
                // 保存用户信息到 localStorage
                localStorage.setItem('phoneNumber', phoneNumber);
                alert('登录成功！');

                // 在这里添加一个延迟
                setTimeout(function () {
                    window.location.href = 'home.html'; // 导航到主页面
                }, 300); // 延迟300毫秒
            } else {
                alert('验证码错误，请重新输入');
            }
        });
    </script>
</body>

</html>